<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人账务</title>

</head>
<body>
<%--account overview page--%>
<div id="account_overview_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse"
           data-transition="slide">主页</a>

        <h1>个人账务</h1>
        <a href="search/init" data-icon="search" data-transition="slidedown">搜索</a>
    </div>
    <div data-role="content">
        <form id="account_filter_form" action="overview" data-ajax="false">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <select id="account_types" name="showType" data-mini="true" data-native-menu="false">
                        <option value="ALL" ${accountOverview.showType eq 'ALL'?'selected':''}>公开账务
                            (${accountOverview.total})
                        </option>
                        <c:if test="${not empty SPRING_SECURITY_CONTEXT}">
                            <option value="SELF" ${accountOverview.showType eq 'SELF'?'selected':''}>只显示我的
                                <c:if test="${accountOverview.showType eq 'SELF'}">(${accountOverview.totalSize})</c:if>
                            </option>
                        </c:if>
                        <option value="LATEST" ${accountOverview.showType eq 'LATEST'?'selected':''}>最近10天
                            <c:if test="${accountOverview.showType eq 'LATEST'}">(${accountOverview.totalSize})</c:if></option>
                    </select>
                </div>
                <div class="ui-block-b">
                    <select id="account_sort" name="sortType" data-mini="true" data-native-menu="false"
                            data-icon="check">
                        <option value="DEFAULT" ${accountOverview.sortType eq 'DEFAULT'?'selected':''}>默认排序</option>
                        <option value="DATE" ${accountOverview.sortType eq 'DATE'?'selected':''}>记录日期</option>
                        <option value="TYPE" ${accountOverview.sortType eq 'TYPE'?'selected':''}>账务类型</option>
                    </select>
                </div>
            </div>
        </form>
        <ul data-role="listview" id="account_view" data-inset="true" data-split-icon="delete" data-split-theme="b">
            <c:forEach items="${accountOverview.list}" var="account">
                <li data-theme="${account.style.label}">
                    <a href="details/${account.guid}" data-transition="pop">
                        <h3 class="${account.income?'red':''}">${account.typeName} <c:if
                                test="${not account.publicity}">
                            <img src="../../images/mobile/lock.png" alt="private"/>
                        </c:if></h3>

                        <p><strong>${account.amount}</strong></p>

                        <p>${account.description} </p>

                        <p class="ui-li-aside">${account.accountDate}</p>
                    </a>
                    <c:if test="${account.allowEdit}">
                        <a href="delete_confirm/${account.guid}" data-transition="slidedown">删除</a>
                    </c:if>
                </li>
            </c:forEach>
            <c:if test="${empty accountOverview.list}">
                <li>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">还没记录任何的个人账务哦.
                            <a href="form" data-role="button" data-icon="plus" data-inline="true"
                               data-mini="true">点击记录</a>
                        </div>
                        <div class="ui-block-b">&nbsp; </div>
                    </div>
                </li>
            </c:if>
        </ul>
        <c:if test="${accountOverview.showMore}">
            <div data-role="controlgroup" id="more_div">
                <a href="javascript:void(0);" id="more_link" data-role="button" class="color-b">
                    更多 (<span id="page_number">${accountOverview.pageNumber}</span>/${accountOverview.totalPages})
                    <img id="more_loading" src="${contextPath}/images/public/load.gif"
                         alt="loading" class="more-img"/>
                </a>
            </div>
        </c:if>

    </div>
    <div data-role="footer" data-position="fixed" data-theme="c">
        <div data-role="navbar">
            <ul>
                <li><a href="form" data-icon="plus" data-transition="flip" data-theme="b">记录</a></li>
                <li><a href="../account_type/overview" data-icon="forward" data-transition="flip">账务类型</a></li>
                <li><a href="../account_statistics/index" data-icon="grid" data-transition="flip">统计</a></li>
                <li><a href="setting" data-icon="gear" data-transition="flip">更多...</a></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">

        $("div#account_overview_page").bind('pagecreate', function () {
            //filter submit event
            $("#account_types,#account_sort").bind("change", function () {
                $.mobile.showPageLoadingMsg();
                $(this.form).submit();
                return false;
            });

            var pageNumber = ${accountOverview.pageNumber};
            var totalSize = ${accountOverview.totalSize};
            var totalPages = ${accountOverview.totalPages};

            $("a#more_link").bind("click", function () {
                var $this = $(this).addClass("gray");
                var nextPageNumber = (++pageNumber);
                var loading = $("#more_loading").show();
                getData();
                function getData() {
                    var url = 'more?' + $("#account_filter_form").serialize() + "&m=" + Math.random();
                    $.ajax({
                        url:url,
                        data:{
                            pageNumber:nextPageNumber,
                            totalSize:totalSize
                        },
                        success:function (data) {
                            var listview = $("#account_view").append($.trim(data)).listview("refresh");
                            $this.removeClass("gray");
                            checkShowMore(listview);
                        }
                    });
                }

                function checkShowMore(listview) {
                    var addedSize = listview.find("li").size();
                    if (addedSize == totalSize) {
                        $("#more_div").hide();
                    } else {
                        loading.hide();
                    }
                    $this.find("#page_number").html(nextPageNumber);
                }
            });
        });

    </script>
</div>
</body>
</html>